<template>
  <div class="container">
    <nav class="navbar navbar-expand-lg">
      <div class="mr-auto">
        <img src="@/assets/logo-1.png" alt="" />
      </div>
      <ul class="navbar-nav d-flex" style="max-height: 100px">
        <li class="nav-item">
          <router-link
            class="nav-link"
            :class="id ? 'text-dark' : ''"
            :to="{ name: 'index' }"
            >首页</router-link
          >
        </li>
        <li class="nav-item">
          <router-link class="nav-link text-dark" :to="{ name: '联盟概况' }"
            >联盟概况</router-link
          >
        </li>
        <li class="nav-item">
          <router-link class="nav-link text-dark" :to="{ name: 'news' }"
            >新闻动态</router-link
          >
        </li>
        <li class="nav-item">
          <a class="nav-link text-dark" href="#">办事指南</a>
        </li>
        <li class="nav-item gangli">
          <a class="nav-link gang p-0" href="#"></a>
        </li>
        <li class="nav-item">
          <span
            v-if="!user"
            class="nav-link dengl"
            @click="dialogTableVisible = true"
            href="#"
            >登录</span
          >
          <el-dropdown v-else size="medium" :command="command">
            <span class="nav-link dengl" @click="gotomain">{{ user.xm }}</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <a :href="hrefmain">管理服务平台 </a>
              </el-dropdown-item>
              <el-dropdown-item>
                <a :href="hreflogout">退出</a>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </li>
      </ul>
    </nav>
    <el-dialog
      width="420px"
      class="dx-dialog"
      title="用户登录"
      :visible.sync="dialogTableVisible"
    >
      <el-form ref="form" :model="form" label-width="0px">
        <el-form-item label="">
          <el-select
            style="width: 100%"
            v-model="form.xxxx"
            placeholder="请选择所属学校"
          >
            <el-option
              v-for="(v, i) in xxxx"
              :key="i"
              :label="v.xxmc"
              :value="v.xxdm"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-input placeholder="用户名" v-model="form.username1">
            <i slot="prefix" class="el-input__icon el-icon-user"></i>
          </el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input placeholder="密码" type="password" v-model="form.password">
            <i slot="prefix" class="el-input__icon el-icon-user"></i>
          </el-input>
        </el-form-item>
        <el-form-item label="" v-if="session">
          <el-input
            placeholder="验证码"
            style="width: 240px; margin-right: 20px"
            v-model="form.imageCode"
          >
          </el-input>
          <img width="120" @click="setimgurl()" :src="imgurl" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button :loading="loading" type="primary" @click="submit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["id", "setindex", "dialogVisible", "setdialogVisible", "user"],
  data() {
    return {
      loading: false,
      xxxx: [],
      form: {
        xxxx: "",
        username1: "",
        password: "",
        username: "",
      },
      imgurl: `${window.baseUrl}code/image?width=92`,
      session: window.session1,
      hreflogout: window.baseUrl + "logout",
      hrefmain: window.baseUrl + "authentication/main",
    };
  },
  computed: {
    dialogTableVisible: {
      get() {
        return this.dialogVisible;
      },
      set(v) {
        this.setdialogVisible(v);
      },
    },
  },
  watch: {
    "form.username1"() {
      this.form.username = this.form.xxxx + "_" + this.form.username1;
    },
  },
  created() {
    if (!window.baseUrl) {
      window.baseUrl = "/inco-shgxlm/";
    }
    this.hreflogout = window.baseUrl + "logout";
    this.getXxxx();
    this.imgurl = `${window.baseUrl}code/image?width=92&tmp=${Date.now()}`;
    this.hrefmain = window.baseUrl + "authentication/main";
  },
  methods: {
    getXxxx() {
      window.$.post(window.baseUrl + "component/queryXxxx").then((e) => {
        this.xxxx = e.content || [];
      });
    },
    setimgurl() {
      this.imgurl = `${window.baseUrl}code/image?width=92&tmp=${Date.now()}`;
    },
    gotomain() {
      location.href = window.baseUrl + "authentication/main";
    },
    submit() {
      this.loading = true;
      this.form.username = this.form.xxxx + "_" + this.form.username1;
      const f = {
        ...this.form
      }
      f.password =  window.Encrypt(this.form.password);
      window.$.post(window.action, f)
        .then(() => {
          this.loading = false;
          window.location.href = window.baseUrl + "authentication/main";
        })
        .catch((e) => {
          console.log(e)
          this.loading = false;
          this.setimgurl()
          this.$message.error(e.content);
        });
    },
    command(v) {
      console.log(v);
    },
  },
};
</script>

<style scoped>
.nav-link {
  cursor: pointer;
}
.dx-dialog .el-dialog__header {
  text-align: center;
}
.nav-item {
  padding-left: 10px;
  padding-right: 10px;
}
.nav-link {
  font-size: 1.2em;
}
.navbar {
  height: 80px;
}
.gangli {
  padding: 9px;
}
.gang {
  width: 2px;
  height: 20px;
  background-color: #999999;
}
.mr-auto {
  height: 60px;
  z-index: 10;
}
.mr-auto img {
  height: 180px;
  margin-top: -38px;
}
.dengl {
  font-weight: 400;
  color: #666666;
  cursor: pointer;
}
</style>